{extend name="base"}
{block name="main"}

<div id="app" v-cloak>
	<el-menu mode="horizontal" :default-active="wsNav.activeIndex">
		<el-menu-item :index="v.name" v-for="v of nav" class="p0">
			<a class="block p_x20" :href="v.href" v-text="v.title"></a>
		</el-menu-item>
	</el-menu>
	
	<el-row class="ws-quote">
		<el-col :span="8">
			<el-button @click="onSubmit(true,'{:url(\'del\')}',{ids:checkData})" :disabled="!checkData.length" type="danger" size="small">删除</el-button>
			<el-button type="primary" size="small" @click="dialogVisible=true">添加账号</el-button>
			<el-button type="primary" size="small" @click="showExcel">导入Excel</el-button>
		</el-col>
		<el-col :span="16" style="text-align: right;">
			<el-form :model="params" inline label-width="0px" size="small">
				<el-form-item label="">
				    <el-input v-model="params.val" placeholder="搜索关键词"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="params.type" placeholder="请选择">
						<el-option
						  label="昵称"
						  value="name">
						</el-option>
						<el-option
						  label="号码"
						  value="number">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
				    <el-select v-model="params.dev" placeholder="请选择">
	    				<el-option
	    				  label="全部"
	    				  value="0">
	    				</el-option>
	    			    <el-option
	    			      v-for="v of device"
	    			      :label="v.name"
	    			      :value="v.id.toString()">
	    			    </el-option>
	    			</el-select>
				</el-form-item>
				<el-form-item label="">
				    <el-button type="primary" size="mini" @click="search">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>

	<el-table @selection-change="selectionChange" size="small" :data="tableData" border stripe>
		<el-table-column type="selection" width="40"></el-table-column>
		<el-table-column prop="id" label="ID"></el-table-column>
		<el-table-column prop="name" label="账号昵称"></el-table-column>
		<el-table-column prop="number" label="号码（例：微信号）" width="150"></el-table-column>
		<el-table-column prop="type.name" label="所属类型" width="100" sortable></el-table-column>
		<el-table-column prop="device.name" label="所属设备" sortable></el-table-column>
		<el-table-column prop="sex" label="性别" width="80" sortable :formatter="sexFormats"></el-table-column>
		<el-table-column prop="login_name" label="登录名"></el-table-column>
		<el-table-column prop="login_pwd" label="登录密码"></el-table-column>
		<el-table-column prop="tel" label="手机号" width="90"></el-table-column>
		<el-table-column prop="s_time" label="更新时间" width="120" :formatter="dateFormats" sortable></el-table-column>
		<el-table-column prop="remark" label="备注"></el-table-column>
		<el-table-column prop="body_id" label="分身ID" width="70" align="center"></el-table-column>
		<el-table-column label="状态">
			<template slot-scope="scope">
				<template v-if="scope.row.status">启用</template>
				<template v-else>禁用</template>
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button type="warning" size="mini" class="ws-mini" v-if="scope.$index>0" icon="el-icon-arrow-up" @click="upRecord(scope.$index)"></el-button>

				<el-button type="warning" size="mini" class="ws-mini" v-if="scope.$index<tableData.length-1" icon="el-icon-arrow-down" @click="downRecord(scope.$index)"></el-button>

				<el-button type="danger" class="ws-mini" @click="onGet('{:url(\'del\')}?id='+scope.row.id,true)">删除</el-button>
				<el-button type="warning" class="ws-mini" @click="close(scope.row)" v-if="scope.row.status">
					禁用
				</el-button>
				<el-button type="primary" class="ws-mini" @click="close(scope.row)" v-else>
					启用
				</el-button>
				<el-button type="primary" class="ws-mini" @click="edit(scope.row)">编辑</el-button>
				<el-button type="primary" class="ws-mini" @click="href('{:url('social/index')}?soft_id='+scope.row.id+'&dev='+scope.row.device_id)">查看好友</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<div class="page">{$list->render()|raw}</div>
	
	<!-- 添加、编辑账号 start -->
	<el-dialog :title="dialogTitle" top="8vh" width="500px" :visible.sync="dialogVisible">
		<el-form ref="forms" :model="data" :rules="rules" label-width="80px">
			<el-form-item label="昵称" prop="name">
				<el-input v-model="data.name" placeholder="昵称"></el-input>
			</el-form-item>
			<el-form-item label="号码" prop="number">
				<el-input type="text" v-model="data.number" placeholder="号码（例：微信号）"></el-input>
			</el-form-item>
			<el-form-item label="所属类型" prop="type_id">
				<el-select v-model="data.type_id" placeholder="请选择" @change="typeName">
				    <el-option :label="v.name" :value="v.id" v-for="v of type"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="所属设备" prop="device_id">
				<el-select v-model="data.device_id" placeholder="请选择" @change="typeName">
				    <el-option :label="v.name" :value="v.id" v-for="v of device"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="性别" prop="version">
				<el-radio-group v-model="data.sex">
				    <el-radio :label="1">男</el-radio>
				    <el-radio :label="0">女</el-radio>
				    <el-radio :label="2">保密</el-radio>
				  </el-radio-group>
			</el-form-item>
			<el-form-item label="分身ID" prop="body_id" v-if="data.id">
				<el-input-number v-model="data.body_id" :min="0" placeholder="分身ID"></el-input-number>
			</el-form-item>
			<el-form-item label="登录名" prop="login_name">
				<el-input type="text" v-model="data.login_name" placeholder="登录名"></el-input>
			</el-form-item>
			<el-form-item label="登录密码" prop="login_pwd">
				<el-input type="text" v-model="data.login_pwd" placeholder="登录密码"></el-input>
			</el-form-item>
			<el-form-item label="手机号码" prop="tel">
				<el-input type="tel" v-model="data.tel" placeholder="手机号码"></el-input>
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input type="textarea" v-model="data.remark" placeholder="备注"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
	    	<el-button @click="dialogVisible = false">取 消</el-button>
	    	<el-button type="primary" @click="onSubmit('forms','{:url(\'add\')}')">提 交</el-button>
	  	</div>
	</el-dialog>
	<!-- 添加账号 end -->

	<!-- 导入Excel 区域 -->
	<link rel="stylesheet" href="{:_static()}/wsvue/index.css">
	<script type="text/babel" src="{:_static()}/wsvue/excel/index.js"></script>
	<script type="text/babel" src="{:_static()}/wsvue/model/index.js"></script>

	<ws-excel :area="area" @ext-error="error" :title="title" :options="options" v-model="show" @change="change"></ws-excel>

</div>

{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}

<script type="text/babel" type="text/javascript">
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		tableData:{$list->toJson()|raw}, // 列表数据
		nav:{$_nav|stripslashes|raw}, 
		checkData:[], // 选中数据
		params:{$params|json_encode|raw},

		type:{$type->toJson()|raw},
		device:{$device->toJson()|raw},
		dialogVisible:{$addVisible|default=0}, // 显示添加、编辑框
		dialogTitle:'添加账号', // 添加、编辑框标题
		data:{}, // 添加、编辑数据
		rules:{
			name:[
				{required: true, message:'请输入昵称'},
			],
			number:[
				{required: true, message:'请输入号码'},
			],
			type_id:[
				{required: true, message:'请选择类型'},
			],
			device_id:[
				{required: true, message:'请选择设备'},
			],
			login_name:[
				{required: true, message:'登录名不能为空'},
			],
			login_pwd:[
				{required: true, message:'登录密码不能为空'},
			],
			tel:[
				{required: true, message:'联系电话不能为空'},
			],

		},

		// 导入相关
		options:['昵称','号码(例：微信号)','所属类型(微信、陌陌、)','所属设备','性别(0：女 1:男 2：保密)','登录名','登录密码','联系号码','备注(可选)'],
		show:false,
		title:'设备导入',
		area:['900','400'],
	},
	created(){
		this.emptyData();
	},
	watch:{
		dialogVisible(newVal){
			if(!newVal&&this.data.id){
				this.emptyData();
			}
		}
	},
	methods:{
		// 用户选择发生改变
		selectionChange(data){
			this.checkData=data.map(item=>{
				return item.id;
			})
		},
		showExcel(show=true){
			this.show=show;
		},
		change(data){
			this._wspost("{:url('addAll')}",{data});
			this.showExcel(false);
		},
		error(ext){
			this.$message({
				message:'错误的文件后缀名：'+ext,
				type:'error'
			})
		},
		emptyData(newData={}){
			this.data=Object.assign({
				name:'',
				number:'',
				type_id:'',
				device_id:{$dev|default=0},
				sex:2,
				login_name:'',
				login_pwd:'',
				tel:'',
				remark:'',
			},newData);
		},
		// 编辑
		edit(data){
			this.emptyData(data);
			this.dialogTitle='账号编辑';
			this.dialogVisible=true;
		},
		close(row){
			this._wspost("{:url('close')}",{id:row.id},res=>{
				if(res.code){
					row.status=!row.status;
				}
			},false)
		},
		typeName(val){
			console.log(this.data.type_id)
		},
		// 查询
		search(){
			let params=this.params,queryStr='';
			for(let key in params){
				if(queryStr.length>0){
					queryStr+='&';
				}else{
					queryStr+='?';
				}
				queryStr+=key+'='+params[key];
			}
			location.href="{:url('')}"+queryStr;
		},
		upRecord(i){
			let props=this.tableData;
			if(i<1)return;
			let t1=props[i],t2=props[i-1];
			let data=[
				{id:t1.id,sort:t2.sort},
				{id:t2.id,sort:t1.sort},
			];
			$.post("{:url('record')}",{val:data},res=>{
				if(typeof res==='string'){
				    res=JSON.parse(res);
				}
				if(res.code!==0){
					let temp=t1.sort;
					t1.sort=t2.sort;t2.sort=temp;
				    props.splice(i-1,2,t1,t2);
				}else if(res.code===0&&res.msg){
					this.$message({
					    message:res.msg,
					    type:'error'
					})
				}
			})
			
		},
		downRecord(i){
			let props=this.tableData;
			if(i===props.length){
				return;
			}
			let t1=props[i+1],t2=props[i];
			let data=[
				{id:t1.id,sort:t2.sort},
				{id:t2.id,sort:t1.sort},
			];
			$.post("{:url('record')}",{val:data},res=>{
				if(typeof res==='string'){
				    res=JSON.parse(res);
				}
				if(res.code!==0){
					let temp=t1.sort;
					t1.sort=t2.sort;t2.sort=temp;
				    props.splice(i,2,t1,t2);
				}else if(res.code===0&&res.msg){
					this.$message({
					    message:res.msg,
					    type:'error'
					})
				}
			})
			
		},
	}
});
</script>

{/block}